<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>医生界面 - 智能医疗系统</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="/templates/index.html">智能医疗系统</a>
    <a class="btn btn-outline-dark" href="/templates/index.html">返回首页</a>
</nav>
<div class="container mt-4" id="app">
    <h2 class="mb-4">医生工作台</h2>
    <div v-if="appointments.length === 0" class="alert alert-info">暂无预约记录</div>
    <div v-for="appointment in appointments" :key="appointment.id" class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">患者：{{appointment.patientName}}</h5>
            <p>时间：{{appointment.date}}</p>
            <p>状态：{{ appointment.status }}</p>
            <button class="btn btn-primary" @click="diagnose(appointment)">诊断</button>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" v-if="showDialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">诊断患者：{{currentAppointment.patientName}}</h5>
                    <button type="button" class="close" @click="showDialog = false">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label>诊断结果:</label>
                    <textarea v-model="diagnosis" class="form-control mb-2"></textarea>
                    <label>药品ID（逗号分隔）:</label>
                    <input v-model="medicineIds" class="form-control" placeholder="如 1,2">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" @click="completeAppointment">提交</button>
                    <button class="btn btn-secondary" @click="showDialog = false">取消</button>
                </div>
            </div>
        </div>
    </div>

    <div class="text-center my-5">
        <a href="/templates/index.html" class="btn btn-link">回到首页</a>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            appointments: [],
            showDialog: false,
            currentAppointment: {},
            diagnosis: '',
            medicineIds: ''
        },
        created() {
            this.fetchAppointments();
        },
        methods: {
            fetchAppointments() {
                axios.get('/doctor/appointments').then(res => {
                    this.appointments = res.data;
                });
            },
            diagnose(appointment) {
                this.currentAppointment = appointment;
                this.diagnosis = '';
                this.medicineIds = '';
                this.showDialog = true;
            },
            async completeAppointment() {
                const appointmentId = this.currentAppointment.id;
                await axios.post('/diagnosis', {
                    appointmentId,
                    diagnosis: this.diagnosis
                });
                const ids = this.medicineIds.split(',').map(i=>i.trim()).filter(Boolean);
                for (const id of ids) {
                    await axios.post('/medicine/deduct', {
                        medicineId: id,
                        quantity: 1
                    });
                }
                this.showDialog = false;
                this.fetchAppointments();
            }
        }
    });
</script>
</body>
</html>